<template>
	<view>
		<hx-navbar ref="hxnb" :config="config"></hx-navbar>
		<view class="main-div">
			<image class="main-bg" src="../../static/img/mine/mine-bg.png" mode=""></image>
			<view class="zhanwei" :style="{'height':statusBarHeight+'rpx'}"></view>
			<view class="m-d">
				<view class="flex_only flex_sb user-div">
					<view class="flex">
						<image class="headimg" :src="userInfo.image" mode="aspectFill"></image>
						<view class="u-m-l-32" v-if="token">
							<view class="flex">
								<view class="font_18_333 font_weight t-tna line_1">{{userInfo.name}}</view>
								<view class="huiyuan-text" v-if="userInfo.level_name">{{userInfo.level_name}}</view>
							</view>
							<view class="zym flex u-m-t-20" v-if="userInfo.motto">
								<image class="h25" src="../../static/img/mine/h25.png" mode=""></image>
								<view class="line_1 u-m-l-8 zym-text">
									{{userInfo.motto}}
								</view>
							</view>
						</view>
						<view class="font_18_333 u-m-l-32" v-if="!token && !ismobile" @click="loginShow=true">
							请点击登录
						</view>
						<view class="font_18_333 u-m-l-32" v-if="!token && ismobile" @click="kuaisulogin">
							快速登录
						</view>
					</view>
					<image v-if="token" @click="toInfo" class="bj-icon" src="../../static/img/mine/bj-icon.png" mode=""></image>
				</view>
				<view class="bg-text u-m-t-6">
					<image class="m-bg-2" src="../../static/img/mine/m-bg-2.png" mode=""></image>
					<view class="flex flex_sb hy-bg" v-if="token">
						<view class="">
							<view class="hy-text">
								升级会员尊享更多会员特权
							</view>
							<view class="u-m-t-16 hy-time" v-if="userInfo.level_time">
								{{userInfo.level_time}}到期
							</view>
						</view>
						<view class="hy-btn" @click="huiyuan">
							<!-- 会员升级 -->
							{{userInfo.level_name?userInfo.level_name:'会员升级'}}
						</view>
					</view>
					<view class="flex flex_sb hy-bg" v-if="!token">
						<view class="">
							<view class="hy-text flex">
								<view class="">问理律</view>
								<image class="vip-i" src="../../static/img/mine/vip.png" mode=""></image>
							</view>
							<view class="u-m-t-16 hy-time">
								尊享会员权益，最高可省888元
							</view>
						</view>
						<view class="hy-btn" @click="huiyuan">
							立即查看
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="m-div">
			<view class="m-td flex flex_sb">
				<view class="font_16_333 font_weight">
					服务订单
				</view>
				<view class="font_12_666" @click="order(0)">
					全部订单 >
				</view>
			</view>
			<view class="flex flex_sb or-div">
				<view class="text_center or-item" @click="order(1)">
					<image class="or-icon" src="../../static/img/mine/o-1.png" mode=""></image>
					<view class="u-m-t-22">
						待支付
					</view>
				</view>
				<view class="text_center or-item" @click="order(2)">
					<image class="or-icon" src="../../static/img/mine/o-3.png" mode=""></image>
					<view class="u-m-t-22">
						待服务
					</view>
				</view>
				<view class="text_center or-item" @click="order(3)">
					<image class="or-icon" src="../../static/img/mine/o-2.png" mode=""></image>
					<view class="u-m-t-22">
						待确认
					</view>
				</view>
				<view class="text_center or-item" @click="order(5)">
					<image class="or-icon" src="../../static/img/mine/o-4.png" mode=""></image>
					<view class="u-m-t-22">
						已完成
					</view>
				</view>
			</view>
			<view class="">
				<u-swiper height="114" :list="lblist"></u-swiper>
			</view>
			<view class="m-td u-m-t-32">
				<view class="font_16_333 font_weight">
					常用工具
				</view>
			</view>
			<view class="flex flex_wrap or-div u-p-b-0">
				<view class="text_center or-item or-item2" @click="toDetail(1)">
					<image class="or-icon" src="../../static/img/mine/mo-1.png" mode=""></image>
					<view class="u-m-t-22">
						优惠券
					</view>
				</view>
				<view class="text_center or-item or-item2" @click="toDetail(2)">
					<image class="or-icon" src="../../static/img/mine/mo-2.png" mode=""></image>
					<view class="u-m-t-22">
						积分兑换
					</view>
				</view>
				<view class="text_center or-item or-item2" @click="toDetail(3)">
					<image class="or-icon" src="../../static/img/mine/mo-3.png" mode=""></image>
					<view class="u-m-t-22">
						我的粉丝
					</view>
				</view>
				<view class="text_center or-item or-item2" @click="toDetail(4)">
					<image class="or-icon" src="../../static/img/mine/mo-4.png" mode=""></image>
					<view class="u-m-t-22">
						我的消息
					</view>
				</view>
				<view class="text_center or-item or-item2" @click="toDetail(5)">
					<image class="or-icon" src="../../static/img/mine/mo-5.png" mode=""></image>
					<view class="u-m-t-22">
						签到
					</view>
				</view>
				<view class="text_center or-item or-item2" @click="toDetail(6)">
					<image class="or-icon" src="../../static/img/mine/mo-6.png" mode=""></image>
					<view class="u-m-t-22">
						律师入驻
					</view>
				</view>
				<view class="text_center or-item or-item2" @click="toDetail(7)">
					<image class="or-icon" src="../../static/img/mine/mo-7.png" mode=""></image>
					<view class="u-m-t-22">
						法海广场
					</view>
				</view>
				
				<view class="text_center or-item or-item2 u-m-t-10" @click="toDetail(8)">
					<button open-type="contact" style="background-color: #fff;">
						<image class="or-icon" src="../../static/img/mine/mo-8.png" mode=""></image>
						<view class="u-m-t-10">
							客服中心
						</view>
					</button>
				</view>
				
				<view class="text_center or-item or-item2" @click="toDetail(9)">
					<image class="or-icon" src="../../static/img/mine/mo-9.png" mode=""></image>
					<view class="u-m-t-22">
						投诉建议
					</view>
				</view>
				<view class="text_center or-item or-item2" @click="toDetail(10)">
					<image class="or-icon" src="../../static/img/mine/mo-10.png" mode=""></image>
					<view class="u-m-t-22">
						我的佣金
					</view>
				</view>
				
			</view>
		</view>
		<view class="jpls-div">
			<view class="jpls-top">
				<image class="jpls-ng" src="../../static/img/home/h22.png" mode=""></image>
				<view class="jpls-text">
					律师推荐
				</view>
			</view>
			<view class="jpls-main flex flex_wrap flex_sb">
				<view class="jpls-item" v-for="(item,index) in lvshilist" :key="index" @click="tolvshi(item)">
					<view class="jpls-zt-top">
						<image class="ls-main-img" :src="item.avatar" mode="aspectFill"></image>
						<view class="jpls-zt" v-if="item.is_online==1">
							在线
						</view>
					</view>
					<view class="flex u-m-t-20">
						<view class="font_14_333 font_weight">
							{{item.name}}
						</view>
						<image class="u-m-l-8 jp-i" src="../../static/img/home/h23.png" mode=""></image>
						<view class="u-m-l-8 font_10_333">
							{{item.province}}
						</view>
					</view>
					<view class="flex flex_sb u-m-t-8">
						<view v-if="index2<3" class="u-m-r-4 line_1" :class="index2<3?'bq'+(index2+1):'bq1'" v-for="(item2,index2) in item.task_arr" :key="index2">
							{{item2.name}}
						</view>
					</view>
					<view class="flex u-m-t-12">
						<view class="flex">
							<image class="ls-xing" src="../../static/img/home/h24.png" mode=""></image>
							<view class="u-m-l-4 ls-fs">
								{{item.mark}}
							</view>
						</view>
						<view class="flex ls-zy">
							<view class="font_10_666">
								执业：
							</view>
							<view class="ls-fs">
								{{item.license_date}}
							</view>
						</view>
					</view>
					<view class="flex u-m-t-16 flex_sb">
						<view class="ls-btn1" @click.stop="zixun(1,item)">
							立即咨询
						</view>
						<view class="ls-btn2" @click.stop="zixun(2,item)">
							预约咨询
						</view>
					</view>
		
				</view>
			</view>
		</view>
		<u-popup v-model="loginShow" mode="bottom" border-radius="32">
			<view class="po-bikan">
				<image class="logo-login mauto" src="../../static/img/mine/logo-login.png" mode=""></image>
				<view class="font_18_333 font_weight u-m-t-52 mauto">
					欢迎来到问理律
				</view>
				
				<view class="u-m-t-52 mauto">
					<button class="login-btn mauto" type="warn" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">授权手机号登录</button>
				</view>
				<view class="font_14_999 u-m-t-54 mauto" @click="loginShow=false">
					取消登录
				</view>
				
				<view class="u-m-t-24 flex flex_cen u-m-t-76">
					<view class="chbox flex_cen flex" v-if="chboxSel" @click="chboxSel=false">
						<u-icon name="checkbox-mark" color="#fff" size="28"></u-icon>
					</view>
					<view class="chbox-no" v-if="!chboxSel" @click="chboxSel=true"></view>
					<view class="u-m-l-10 font_14_999">
						我已阅读并同意
						 <span class="yhxy" @click="yinsiShow=true">用户服务协议</span>和
						 <span class="yhxy" @click="yinsiShow2=true">隐私政策</span>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="yinsiShow" mode="center" border-radius="32">
			<view class="po-bikan2">
				<view class="bk-title u-m-b-32">
					用户服务协议
				</view>
				<scroll-view scroll-y="true" style="max-height: 500rpx;">
					<view class="font_14_666 u-m-b-40">
						<rich-text :nodes="richText"></rich-text>
					</view>
				</scroll-view>
				
				<view class="zd-btn" @click="yinsiShow=false">
					我知道了
				</view>
			</view>
		</u-popup>
		<u-popup v-model="yinsiShow2" mode="center" border-radius="32">
			<view class="po-bikan2">
				<view class="bk-title u-m-b-32">
					隐私政策
				</view>
				<scroll-view scroll-y="true" style="max-height: 500rpx;">
					<view class="font_14_666 u-m-b-40">
						<rich-text :nodes="richText2"></rich-text>
					</view>
				</scroll-view>
				
				<view class="zd-btn" @click="yinsiShow2=false">
					我知道了
				</view>
			</view>
		</u-popup>
		<u-popup v-model="zixunShow" mode="bottom" closeable border-radius="32" :mask-close-able="false">
			<view class="po-bikan3">
				<view class="bk-title u-m-b-32">
					全部服务
				</view>
				<scroll-view scroll-y="true" style="height: 650rpx;"  v-if="id">
					<fuwuList v-if="token" :sid="id"></fuwuList>
				</scroll-view>
			</view>
		</u-popup>
		
		<gongzhonghaotanchuangVue></gongzhonghaotanchuangVue>
		<mypicker mode="selector" v-model="showsr2" :range="selector1" @confirm="typeconfirm"></mypicker>
		<mypickertime mode="multiSelector" v-model="showsr3" :range="multiSelector" @confirm="typeconfirm2">
		</mypickertime>
		
		<u-tabbar active-color="#FA3B21" :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import gongzhonghaotanchuangVue from '../../components/gongzhonghaotanchuang/gongzhonghaotanchuang.vue';
	import fuwuList from '../../components/fuwuList/fuwuList.vue';
	import mypicker from '../../components/my-picker/my-picker.vue';
	import mypickertime from '../../components/my-picker-time/my-picker-time.vue';
	var statusBarHeight = (uni.getSystemInfoSync().statusBarHeight * 2);
	import { formatRichText } from '@/static/richText.js'
	export default {
		components: {
			gongzhonghaotanchuangVue,
			fuwuList,
			mypicker,
			mypickertime
		},
		data() {
			return {
				ismobile:false,
				code: '',
				openid: '',
				session_key: '',
				unionid: '',
				token: '',
				token2: '',
				token3: '',
				userInfo:[],
				
				showsr2: false,
				showsr3: false,
				zixunShow: false,
				selector1: ['律师函', '文书代写', '合同审查', '诉讼指导', '线上调解', '法律意见书', '服务类型'],
				multiSelector: [
					['13日', '14日', '15日'],
					['10:00-12:00', '12:00-14:00', '14:00-16:00', '16:00-18:00']
				],
				statusBarHeight: statusBarHeight,
				config: {
					maxSlot: true,
					back: false,
					barPlaceholder: false,
					backgroundColor: [0, '#fff'],
					slideBackgroundColor: [1, '#fff']
				},
				tabbar: '',
				isLogin:'',
				chboxSel:false,
				loginShow:false,
				yinsiShow:false,
				yinsiShow2:false,
				lblist: [],
				lvshiInfo:[],
				lvshilist:[],
				id:'',
				richText:'',
				richText2:''
			}
		},
		onPageScroll(e) {
			// 重点，用到滑动切换必须加上
			// this.$refs.hxnb.pageScroll(e);
		},
		onLoad() {
			this.tabbar = [{
					iconPath: "/static/img/tabBar/1-2.png",
					selectedIconPath: "/static/img/tabBar/1-1.png",
					text: '首页',
					pagePath: "/pages/index/index"
				}, {
					iconPath: "/static/img/tabBar/2-2.png",
					selectedIconPath: "/static/img/tabBar/2-1.png",
					text: '找律师',
					pagePath: "/pages/lawyer/lawyer"
				}, {
					iconPath: "/static/img/tabBar/3-1.png",
					selectedIconPath: "/static/img/tabBar/3-1.png",
					text: 'AI模型',
					midButton: true,
					pagePath: "/pages/AI/AI"
				}, {
					iconPath: "/static/img/tabBar/4-1.png",
					selectedIconPath: "/static/img/tabBar/4-1.png",
					text: '在线咨询',
					// count: 2,
					isDot: false,
					pagePath: "/TXIM/pages/consultation/consultation"
				}, {
					iconPath: "/static/img/tabBar/5-2.png",
					selectedIconPath: "/static/img/tabBar/5-1.png",
					text: '我的',
					pagePath: "/pages/mine/mine"
				},

			]
			
			this.lunbo()
			this.getlvshi()
			
			this.getxieyi()
			
		},
		onShow() {
			this.token = uni.getStorageSync("token")
			if(!this.token){
				this.login()
			}else{
				this.getInfo()
			}
			
			// uni.setStorage({
			// 	key: 'token',
			// 	data: 'dcb8523e1e6b0bc5e3f4e86b5a0ebbda'
			// });
			
		},
		methods: {
			getxieyi(e) {
				this.$api({
					url: '/getPage',
					method: 'get',
					data: {
						id:44
					},
				}).then(res => {
					if (res.code == 1) {
						this.richText = formatRichText(res.data.content)
					}
				})
				
				this.$api({
					url: '/getPage',
					method: 'get',
					data: {
						id:35
					},
				}).then(res => {
					if (res.code == 1) {
						this.richText2 = formatRichText(res.data.content)
					}
				})
			},
			getlvshi(){
				this.$api({
					url: '/user/look_lawyers',
					method: 'get',
					data: {
						limit: 100,
					},
				}).then(res => {
					if (res.code == 1) {
						this.lvshilist = res.data.data
					}
				})
			},
			lunbo(){
				this.$api({
					url: '/getBanner',
					method: 'get',
					data: {
						position: 7,
					},
				}).then(res => {
					if (res.code == 1) {
						this.lblist = res.data
					}
				})
			},
			//获取code
			login() {
				let that = this
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						// console.log(loginRes.code)
						// return
						that.$api({
							url: '/login',
							method: 'post',
							data: {
								shangji_id:uni.getStorageSync("shangji_id"),
								code: loginRes.code
							},
						}).then(res => {
							if (res.code == 1) {
								that.openid = res.data.openid
								that.session_key = res.data.session_key
								that.unionid = res.data.unionid
								that.token2 = res.data.token
								
								
								if(res.data.mobile){
									that.ismobile = true
									that.token3 = res.data.token
									
									
								}else{
									that.ismobile = false
								}
								
								
							}
						})
					}
				});
			},
			kuaisulogin(){
				uni.setStorageSync('token',this.token3);
				this.getInfo()
			},
			//获取手机号
			getPhoneNumber(e) {
				if (!this.chboxSel) {
					this.show3 = true
					uni.showToast({
						title: "请先勾选确认并同意用户协议",
						icon: "none"
					});
					return
				}
				// 如果点击授权进行下一步
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					console.log(e.detail)
					
					this.$api({
						url: '/bindMoble',
						method: 'post',
						data: {
							token: this.token2,
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							session_key: this.session_key,
						},
					}).then(res => {
						if (res.code == 1) {
							uni.setStorageSync('token',res.data.remember_token);
							this.loginShow=false
							this.getInfo()
						}
					})
				}
			},
			//个人信息
			getInfo() {
				this.token = uni.getStorageSync("token")
				
				console.log(this.token)
				this.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token:this.token
					},
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.userInfo = res.data
						uni.setStorageSync('myuserid',res.data.id);
						this.token = uni.getStorageSync("token")
					} if(res.code == 0){
						this.token = ''
						
						uni.removeStorageSync('token')
						this.login()
					}
				})
			},
			
			
			toInfo(){
				uni.navigateTo({
					url:"/pages/mine/userInfo"
				})
			},
			order(e){
				uni.navigateTo({
					url:"/pages/mine/orderList?type="+e
				})
			},
			huiyuan(){
				uni.navigateTo({
					url:"/pages/mine/member"
				})
			},
			toDetail(e){
				if(!uni.getStorageSync("token")){
					uni.showToast({
						title: "请先登录",
						icon: "none"
					});
					return
				}
				if(e==1){
					uni.navigateTo({
						url:"/pages/mine/youhuiquan?type=1"
					})
				}
				if(e==2){
					uni.navigateTo({
						url:"/pages/mine/jifenShop?type=1"
					})
				}
				if(e==3){
					uni.navigateTo({
						url:"/pages/mine/fans"
					})
				}
				if(e==4){
					uni.navigateTo({
						url:"/pages/mine/message"
					})
				}
				if(e==5){
					uni.navigateTo({
						url:"/pages/mine/singin?type=1"
					})
				}
				if(e==6){
					
					// uni.navigateTo({
					// 	url:"/subPackageA/pages/lawyerVersion/index/index"
					// })
					// return
					// status 0正常用户  1通过 2审核中 3拒绝
					if(this.userInfo.status==0){
						uni.navigateTo({
							url:"/pages/mine/renzheng"
						})
					}else{
						// uni.navigateTo({
						// 	url:"/pages/mine/renzhengResult?check_status="+this.userInfo.status
						// })
						uni.navigateTo({
							url:"/pages/mine/renzhengResult"
						})
					}
					
				}
				if(e==7){
					uni.navigateTo({
						url:"/pages/index/fahaiCenter"
					})
				}
				if(e==9){
					uni.navigateTo({
						url:"/pages/mine/feedback"
					})
				}
				if(e==10){
					uni.navigateTo({
						url:"/pages/mine/yongjin?type=1"
					})
				}
			},
			
			
			
			zixun(e,item) {
				this.id = ''
				setTimeout(()=>{
					this.id = item.id
					if (e == 1) {
						this.zixunShow = true
					}
					if (e == 2) {
						uni.navigateTo({
							url: "/pages/lawyer/lawyerListDetail?id="+item.id
						})
					}
				},50)
			},
			typeconfirm(e) {
				this.showsr2 = false
				this.showsr3 = true
				console.log(this.selector1[e])
			},
			typeconfirm2(e){
				this.showsr3 = true
				console.log(this.multiSelector[0][e[0]])
				console.log(this.multiSelector[1][e[1]])
				
				uni.navigateTo({
					url:"/pages/index/paySuccess"
				})
				
			},
			tolvshi(e){
				uni.navigateTo({
					url: "/pages/lawyer/lawyerDetail?id="+e.id
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.po-bikan3 {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 100%;
	
		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	}
	.po-bikan2 {
		padding: 40rpx 32rpx;
		background: #F6F6F6;
		width: 640rpx;
	
		.bk-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			text-align: center;
		}
		.zd-btn{
			border-top: 2rpx solid #EDEDED;
			font-size: 32rpx;
			color: #4088E5;
			padding-top: 32rpx;
			text-align: center;
		}
	}
	.po-bikan {
		padding: 40rpx 32rpx;
		padding-top: 120rpx;
		background: #FFFFFF;
		width: 100%;
		text-align: center;
		
		.mauto{
			margin: 0 auto;
		}
		.logo-login{
			width: 188rpx;
			height: 56rpx;
		}
		.login-btn{
			width: 560rpx;
			height: 92rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
		}
		.yhxy{
			color: #F92323;
			text-decoration: underline;
		}
		.chbox {
			width: 44rpx;
			height: 44rpx;
			background: #F81B1B;
			border-radius: 50%;
			text-align: center;
			// line-height: 24rpx;
		}
		
		.chbox-no {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			border: 1px #999 solid;
		}
	}
	.nav_wrap {
		width: 100%;
		position: relative;
	
		.back_wrap {
			position: absolute;
			left: 24rpx;
	
			
		}
	
		.page_title {
			width: 100vw;
			text-align: center;
			font-weight: bold;
	
			image {
				width: 190rpx;
				height: 56rpx;
				margin: 0 auto;
			}
		}
	}
	.main-div {
		position: relative;
		width: 100%;
		background-color: #FFE7AF;
		height: 506rpx;
		display: flex;
		flex-direction: column;
	
		.main-bg {
			width: 100%;
			height: 506rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}
	
		.m-d {
			position: relative;
			padding-top: 88rpx;
			z-index: 2;
			height: 100%;
			flex: 1; /* 这会使子元素填满剩余空间 */
		}
	}
	.user-div{
		padding: 40rpx 32rpx;
		.bj-icon{
			width: 40rpx;
			height: 40rpx;
		}
		.headimg{
			width: 104rpx;
			height: 104rpx;
			border-radius: 50%;
			background-color: #eee;
		}
		.huiyuan-text{
			width: 96rpx;
			height: 24rpx;
			background: linear-gradient( 147deg, #282D43 0%, #292D44 100%);
			border-radius: 0rpx 8rpx 0rpx 8rpx;
			margin-left: 16rpx;
			font-size: 18rpx;
			color: #FFE6BA;
			text-align: center;
			line-height: 24rpx;
		}
		.t-tna{
			max-width: 300rpx;
			height: 40rpx;
		}
		.zym{
			padding: 4rpx 8rpx;
			background:#FFF3D6;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			max-width: 300rpx;
			.h25{
				width: 28rpx;
				height: 26rpx;
			}
			.zym-text{
				font-size: 20rpx;
				color: #713005;
				max-width: 260rpx;
			}
		}
	}
	.bg-text{
		position: absolute;
		width: 686rpx;
		height: 146rpx;
		margin-left: 32rpx;
		bottom: -14rpx;
		
		.m-bg-2{
			width: 686rpx;
			height: 146rpx;
			position: absolute;
			top: 0;
			z-index: 0;
		}
		.hy-bg{
			position: relative;
			z-index: 2;
			padding:24rpx;
			.hy-text{
				font-weight: bold;
				font-size: 28rpx;
				color: #FFE8B2;
				
				.vip-i{
					width: 68rpx;
					height: 26rpx;
					margin-left: 8rpx;
				}
			}
			.hy-time{
				font-size: 20rpx;
				color: #FFE8B2;
			}
			.hy-btn{
				font-size: 24rpx;
				color: #955712;
				width: 152rpx;
				height: 48rpx;
				background: linear-gradient( 309deg, #FFE8B2 0%, #F5CE71 100%);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				text-align: center;
				line-height: 48rpx;
			}
		}
		
	}
	.m-div{
		padding: 32rpx;
		padding-top: 46rpx;
		background: #FFFFFF;
		.or-div{
			padding: 34rpx 0;
			
			.or-item{
				width: 25%;
				
				.or-icon{
					width: 56rpx;
					height: 56rpx;
					margin:  0 auto;
				}
				
				&2{
					margin-bottom: 32rpx;
				}
			}
		}
		
	}
	/deep/ .u-indicator-item-round-active {
		width: 14rpx;
		background-color: #F7D37D;
	}
	.jpls-div {
		margin-top: 30rpx;
	
		.jpls-top {
			margin: 0 auto;
			position: relative;
			width: 686rpx;
			height: 56rpx;
	
			.jpls-ng {
				width: 686rpx;
				height: 14rpx;
				position: absolute;
				left: 0;
				top: 20rpx;
			}
	
			.jpls-text {
				text-align: center;
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
			}
		}
	
		.jpls-main {
			padding: 32rpx;
	
			.jpls-item {
				width: 334rpx;
				padding: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 20rpx;
	
				.jpls-zt-top {
					position: relative;
					width: 294rpx;
					height: 412rpx;
	
					.ls-main-img {
						width: 294rpx;
						height: 412rpx;
					}
	
					.jpls-zt {
						position: absolute;
						top: 0;
						left: 0;
						width: 78rpx;
						height: 40rpx;
						background: #FFFFFF;
						border-radius: 8rpx 0rpx 20rpx 0rpx;
						background-color: rgba(255, 255, 255, 0.2);
						font-size: 24rpx;
						color: #38E552;
						line-height: 40rpx;
						text-align: center;
					}
				}
	
				.jp-i {
					width: 24rpx;
					height: 20rpx;
				}
	
				.bq1 {
					font-size: 20rpx;
					color: #FF4A50;
					padding: 4rpx 6rpx;
					background: #F8EDED;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
	
				.bq2 {
					font-size: 20rpx;
					color: #5385E3;
					padding: 4rpx 6rpx;
					background: #E5F3FF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
	
				.bq3 {
					font-size: 20rpx;
					color: #F7790D;
					padding: 4rpx 6rpx;
					background: #FFE8D3;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
	
				.ls-xing {
					width: 24rpx;
					height: 24rpx;
				}
	
				.ls-fs {
					font-size: 20rpx;
					color: #FD8643;
				}
	
				.ls-zy {
					padding-left: 20rpx;
					border-left: 1px #999 solid;
					margin-left: 20rpx;
				}
	
				.ls-btn1 {
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					width: 144rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					text-align: center;
					line-height: 56rpx;
				}
	
				.ls-btn2 {
					width: 144rpx;
					height: 56rpx;
					background: #FFEBEB;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 2rpx solid #FF9D9D;
					font-weight: bold;
					font-size: 24rpx;
					color: #F81B19;
					text-align: center;
					line-height: 56rpx;
				}
			}
		}
	}
	
</style>